<template>
  <div class="wrapper">
    <div class="search">
      <van-search
        shape="round"
        @focus="goSearch()"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="content">
      <div class="c_left">
        <ul>
          <li
            @click="toggleType(index, item.type)"
            :class="{ active: activeIndex === index }"
            v-for="(item, index) in typeData"
            :key="index"
          >
            {{ item.typeDesc }}
          </li>
        </ul>
      </div>
      <div class="c_right">
        <div class="c_r_rbox">
          <div
            class="c_r_pro"
            v-for="(item, index) in productData"
            :key="index"
            @click="goDetail(item.pid)"
          >
            <Pro :pro="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pro from "../components/Pro";
export default {
  name: "Menu",
  data() {
    return {
      value: "",
      activeIndex: 0,

      // 商品类型的数据
      typeData: [],

      // 商品数据
      productData: [],
    };
  },
  components: {
    Pro,
  },
  created() {
    this.getTypeData();
    
    if(this.$route.query.index){
      this.activeIndex = Number(this.$route.query.index);
    }
  },
  methods: {
    // 跳转至搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },
    getTypeData() {
      this.axios({
        method: "GET",
        url: "/type",
        params: {},
      })
        .then((res) => {
          if (res.data.code === 400) {
            res.data.result.unshift({ type: "isHot", typeDesc: "热卖推荐" });
            this.typeData = res.data.result;
            this.getproductByType(res.data.result[this.activeIndex].type);
          }
        })
        .catch((err) => {
          
        });
    },
    toggleType(index, type) {
      if (this.activeIndex == index) {
        return;
      }
      this.activeIndex = index;
      this.getproductByType(type);
    },
    // 根据商品类型获取商品数据
    getproductByType(type) {
      // 获取缓存数据
      let cacheData = localStorage.getItem("cacheProduct");
      cacheData = cacheData ? JSON.parse(cacheData) : {};

      // 判断缓存是否e过期
      // 获取当前时间
      let currentTime = new Date().getTime();
      if (cacheData.aa && currentTime - cacheData.aa < 30 * 1000) {
        // 当前类型的商品数据是否存在
        if (cacheData[type]) {
          
          this.productData = cacheData[type];
          return;
        }
      } else {
        cacheData = {};
      }

      

      let key = "";
      let value = "";
      if (type === "isHot") {
        key = type;
        value = 1;
      } else {
        key = "type";
        value = type;
      }

      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((res) => {
          // 
          if (res.data.code === 500) {
            this.productData = res.data.result;

            if (!cacheData.aa) {
              cacheData.aa = new Date().getTime();
            }
            cacheData[type] = res.data.result;
            localStorage.setItem("cacheProduct", JSON.stringify(cacheData));
          }
        })
        .catch((err) => {
          
        });
    },
    goDetail(pid) {
      
      this.$router.push({
        path: "/detailed",
        query: { pid: pid, index: this.activeIndex },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  .search {
    height: 54px;
    position: sticky;
    top: 0;
  }
  .content {
    position: fixed;
    top: 54px;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    .c_left {
      flex: 1 0 20%;
      background-color: #f0f0f0;
      overflow-y: auto;
      ul {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 0;
        li {
          widows: 100%;
          height: 30px;
          background-color: #f0f0f0;
          font-size: 15px;
          text-align: center;
          line-height: 30px;
        }
        .active {
          background-color: #fff;
          font-weight: bold;
        }
      }
    }
    .c_right {
      flex: 1 0 80%;
      padding: 10px;
      overflow-y: auto;
      box-sizing: border-box;
      .c_r_rbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .c_r_pro {
          flex: 0 0 49%;
          box-sizing: border-box;
          margin-top: 10px;
          overflow-y: auto;
        }
      }
    }
  }
}
</style>